<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>AgCIM 聊天机器人</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" sizes="32x32">
    <link rel="icon" href="favicon.ico" sizes="64x64">
    <link rel="icon" href="favicon.ico" sizes="128x128">

    <link media="all" rel="stylesheet" type="text/css" href="./assets/styles/chatgpt.css">
    <script type="text/javascript" src="./assets/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="./assets/scripts/saveData.js"></script>
    <script type="text/javascript" src="./assets/scripts/mobilecheck.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
    <script type="text/javascript">
      window.isMobile=false;
        if (mobilecheck()) {
            $('<link/>', {
                media: 'all',
                rel: 'stylesheet',
                type: 'text/css',
                href: 'assets/styles/mobile.css'
            }).appendTo('head')
            window.isMobile=true;
        }
    </script>
    <style>
        .btn {
            display: inline-block;
            padding: 6px 12px;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
    </style>
</head>

<body style="width: 80%; margin: auto">
  <div>
    <span id="m1">请选择话题</span>
    <select class="paperTypeStyle">
    </select>
    <div class="btn" onclick="sendQuestion('newtopic')">新话题</div>
  </div>
  <div id="chatBox" class="chatBox">
  </div>
  <div id="stateLabel"></div>
  <div class="sendBox">
    <input id="sendInput" onkeydown="EnterKey()" style="width: calc(100% - 140px);height: 100%;" />
    <div class="btn" onclick="sendMsg()">发送</div>
  </div>
  <div id="popup" class="popup">
    <div class="popup-content">
      <span class="close-button">&times;</span>
      <h2>This is a popup</h2>
      <p>You can add any content you want inside the popup.</p>
    </div>
  </div>
</body>
<script type="text/javascript" src="chatJS.js"></script>
<style>
  .popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .popup-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 60%;
            height: 90%;
          overflow: scroll;
          position: fixed;
          left: 15%;
          top: -30%;
        }
</style>
<script>
  function updateMobileStyle(){
    if(!window.isMobile)return;
    document.body.style.width="100%"
    let  m1=document.getElementById('m1')
    
    var sendBox=document.getElementsByClassName('sendBox')[0];
    sendBox.style.width="100%"
    sendBox.style.left="10px"
    sendBox.style.height="30px"
    sendBox.style.bottom="12px";
    document.getElementById('sendInput').style.width='calc(100% - 80px)'
    document.getElementById('chatBox').style.height='calc(100% - 140px)'
    document.getElementsByClassName('paperTypeStyle')[0].style.width='calc(100% - 130px)'

    if(m1)
      m1.parentNode.removeChild(m1)

  }
  updateMobileStyle();

  if(document.body.clientWidth<600){
    window.isMobile=true;
    updateMobileStyle();
  }
</script>
</html>